<template>
  <div class="supplier-container">
    <!-- 显示 -->
    <el-card shadow="always">
      <!-- 第一行，按钮（添加供应商）和搜索框 -->
      <el-row :gutter="24">
        <!-- 按钮，添加供应商 -->
        <el-col :span="18">
          <el-button
            type="primary"
            size="small"
            @click="showDialogForm"
          >添加供应商</el-button>
        </el-col>
        <!-- 输入框，搜索表格内容 -->
        <el-col :span="6">
          <el-input
            v-model="input"
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            size="small"
            @keyup.enter.native="getSupplierList()"
          />
        </el-col>
      </el-row>

      <!-- 第二行，表格显示供应商信息 -->
      <el-table
        size="small"
        :data="supplierList"
        style="width: 100%; margin: 15px 0px"
      >
        <!-- 展开行 -->
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form
              label-position="left"
              inline
              class="demo-table-expand"
              size="small"
            >
              <el-form-item label="营业许可：">
                <span><el-link
                  type="primary"
                  @click="handlePictureCardPreview(props.$index)"
                >点击查看</el-link></span>
                <!-- 图片预览 -->
                <el-dialog :visible.sync="props.row.dialogVisible">
                  <img width="100%" :src="props.row.image" alt="营业许可证">
                </el-dialog>
              </el-form-item>
              <el-form-item label="成立时间：">
                <span>{{ props.row.date }}</span>
              </el-form-item>
              <el-form-item label="开户银行：">
                <span>{{ props.row.bank }}</span>
              </el-form-item>
              <el-form-item label="银行账号：">
                <span>{{ props.row.card }}</span>
              </el-form-item>
              <el-form-item label="联系人：">
                <span>{{ props.row.contact }}（{{
                  props.row.sex ? "先生" : "女士"
                }}）</span>
              </el-form-item>
              <el-form-item label="联系方式：">
                <span>{{ props.row.telephone }}</span>
              </el-form-item>
              <el-form-item label="备注内容：">
                <span>{{ props.row.others }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>

        <!-- 表格字段 -->
        <el-table-column
          prop="id"
          label="供应商ID"
          align="center"
          width="80px"
        />
        <el-table-column
          prop="code"
          label="营业执照编号"
          align="center"
          width="200px"
        />
        <el-table-column
          prop="name"
          label="供应商名称"
          align="center"
          width="160px"
        />
        <el-table-column
          label="公司地址"
          align="center"
          width="230px"
        ><template slot-scope="{ row }">
          {{ row.a1 + row.a2 + row.a3 + row.a4 }}
        </template></el-table-column>
        <!-- 供应商状态 -->
        <el-table-column label="状态" align="center" width="80px">
          <template slot-scope="{ row }">
            <el-tag :type="tagType(row)">{{
              row.flag ? "启用" : "禁用"
            }}</el-tag>
          </template>
        </el-table-column>
        <!-- 供应商操作 -->
        <el-table-column label="操作" align="center">
          <template slot-scope="{ row }">
            <el-tooltip
              class="item"
              effect="dark"
              content="查看供应商xx"
              placement="bottom"
            >
              <el-button icon="el-icon-search" circle @click="showImage(row)" />
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="修改供应商信息"
              placement="bottom"
            >
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                @click="modify(row)"
              />
            </el-tooltip>
            <!-- <el-tooltip
              class="item"
              effect="dark"
              content="删除供应商信息"
              placement="bottom"
            >
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="deleteSupplier(row)"
              />
            </el-tooltip> -->
          </template>
        </el-table-column>
      </el-table>

      <!-- 对话框，添加|修改品牌信息 -->
      <DialogForm ref="dialogForm" @getSupplierList="getSupplierList()" />
    </el-card>
  </div>
</template>

<script>
import DialogForm from '@/views/information/supplier/components/DialogForm'

export default {
  name: 'Supplier',
  components: {
    DialogForm
  },
  data() {
    return {
      // 供应商信息列表
      supplierList: [],
      // 关键字
      input: ''
    }
  },
  mounted() {
    // 获取供应商信息
    this.getSupplierList()
  },
  methods: {
    // 添加供应商
    showDialogForm() {
      // 调用子组件添加单位方法，显示弹窗
      this.$refs.dialogForm.dialogFormOn()
    },
    // 获取供应商信息列表
    async getSupplierList() {
      const response = await this.$API.supplier.get(this.input)
      if (response.code === 200) {
        // 保存数据
        this.supplierList = response.data
      } else {
        // 数据获取失败，弹窗提醒
        this.$message.error(response.msg)
      }
    },
    // 返回tag的type
    tagType(row) {
      return row.flag ? 'success' : 'danger'
    },
    // 弹窗预览营业许可证
    handlePictureCardPreview($index) {
      this.supplierList[$index].dialogVisible = true
    },
    // 弹窗显示供应商资质
    showImage(row) {

    },
    // 修改供应商信息
    modify(row) {
      // 调用子组件添加单位方法，显示弹窗
      this.$refs.dialogForm.dialogFormOn()
      // 修改子组件dialogForm内容
      this.$nextTick(async() => {
        this.$refs['dialogForm'].dialogForm = { ...row }
        // bug-fixed：修改供应商信息时，地址的下拉框无数据（不能直接调用getA2List，因为会将value删除）
        const responseA2 = await this.$API.supplier.district(row.a1)
        this.$refs['dialogForm'].a2List = JSON.parse(responseA2.data).districts[0].districts

        const responseA3 = await this.$API.supplier.district(row.a2)
        this.$refs['dialogForm'].a3List = JSON.parse(responseA3.data).districts[0].districts
      })
    },
    // 删除供应商信息
    deleteSupplier(row) {
      this.$confirm('此操作将永久删除该供应商信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const response = await this.$API.supplier.deleteSupplier(row.id)
        if (response.code === 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          // 重新拉取供应商信息
          this.getSupplierList()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.supplier {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>

// 展开行样式
<style>
.demo-table-expand {
  font-size: 0px;
}
.demo-table-expand label {
  font-weight: 400;
  font-size: 14px;
  margin-left: 15px;
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
</style>
